<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        #main {
            width: 85%;
            height: 700px;
        }

        #attraction_manage {
            text-align: center;

            p {
                margin: 30px 0;
            }

            .one-line {
                width: 50%;
                height: 30px;
                margin-left: 1%;
            }

            #label_level {
                margin-left: -18.5%;
            }

            input[type="radio"] {
                margin-left: 2%;
                zoom: 1.2;
            }

            select {
                width: 48%;
                height: 30px;
                margin-left: 1%;
            }

            .inp-btn {
                width: 13%;
                height: 30px;
                margin: 0 1%;
            }

            textarea {
                width: 50%;
                margin-left: 1%;
            }

            input[type="submit"] {
                color: white;
                background-color: #19a094;
            }
        }
    </style>
</head>

<body>
    <div id="new_header">
        <script>
            $("#new_header").load("manager_header.html")
        </script>
    </div>
    <div id="main" class="right">
        <!-- 景点管理 -->
        <div id="attraction_manage">
            <form action="AddAttractionServlet" enctype="multipart/form-data" method="post">
                <p>景点名称<input type="text" class="one-line" name="name"></p>
                <p><label id="label_level">景点等级</label>
                    <input type="radio" name="level" value="1">A
                    <input type="radio" name="level" value="2">AA
                    <input type="radio" name="level" value="3">AAA
                    <input type="radio" name="level" value="4">AAAA
                    <input type="radio" name="level" value="5">AAAAA
                </p>
                <p>门票价格<input type="number" class="one-line" name="price"></p>
                <p>景点地址<input type="text" class="one-line" name="address"></p>
                <p>开放时间<input type="text" class="one-line" name="openTime" placeholder="示例:9:00-17:00"></p>
                <p><img id="previewImg"></p>
                <p>选择图片<input type="file" class="one-line" name="pic" onchange="showPic(this)"></p>
                <p>景点简介<textarea rows="5" cols="50" name="introduce"></textarea></p>
                <p>状态<select name="status">
                        <option value="发布">发布</option>
                        <option value="草稿">草稿</option>
                    </select></p>
                <p><input type="submit" value="保存" class="inp-btn">
                    <input type="reset" class="inp-btn">
                </p>
            </form>

        </div>
    </div>
    <script>
        //选择一个图片后显示预览图
        function showPic(file){	
            var reader = new FileReader();	// 实例化一个FileReader对象，用于读取文件
            var img = document.getElementById('previewImg'); 	// 获取要显示图片的标签
            
            //读取File对象的数据
            reader.onload = function(evt){
                img.width  =  "80";
                img.height =  "80";
                img.src = evt.target.result;
            }
            reader.readAsDataURL(file.files[0]);
        }
    </script>
</body>

</html>